<template>
    <div>
          <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础数据</el-breadcrumb-item>
        <el-breadcrumb-item>登录日志</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card>
          <span>登录时间：</span>
            <el-date-picker
                    v-model="dataValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    size="small"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="initTime"
            ></el-date-picker>
            <el-button  type="success" @click="listPage" style="margin-left:15px" size="small" icon="el-icon-search" v-if="permissionStrValue.indexOf('loginLog:query') !== -1">查询</el-button>
            <el-divider></el-divider>
             <!--放表格-->
            <el-table :data="list" border stripe height="450">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column label="用户名">
                    <template slot-scope="scope">
                        <span style="color:#409EFF" size="medium">{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="登录ip">
                    <template slot-scope="scope">
                        <span style="color:#409EFF" size="medium">{{ scope.row.loginIp }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="登录地址">
                    <template slot-scope="scope">
                        <span style="color:#409EFF" size="medium">{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="登录时间">
                    <template slot-scope="scope">
                        <span style="color:#409EFF" size="medium">{{ scope.row.loginTime}}</span>
                    </template>
                </el-table-column>
            </el-table>

             <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>


    </div>
</template>


<script>
export default {
    name: 'loginLog',
    data() {
        return {
            dataValue: '',
            queryParams: {
                address: '',
                loginTimeStart: '',
                loginTimeEnd: '',
                currPage: 1,
                pageSize: 10
            },
            list: [],
            total: 0,
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },
            permissionStrValue: ''
        }
    },
    created() {
        this.listPage();
         //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();
    },
    methods: {
        async listPage() {
          const{data: res} = await this.$http.post('/user/login-log/list-page', JSON.stringify(this.queryParams), {
              headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
              }
          })
          console.log(res)
          this.list = res.data;
          this.total = res.total;
        },
        initTime(val) {
            if(val !== null) {
               this.queryParams.loginTimeStart = val[0];
               this.queryParams.loginTimeEnd = val[1];
            }
        },
        handleSizeChange(newPageSize) {
            this.queryParams.pageSize = newPageSize;
            this.listPage();
        },
        handleCurrentChange(newPage) {
            this.queryParams.currPage = newPage;
            this.listPage();

        },
        

    }

}
</script>